<%@ page import="com.nebula.common.Const" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title><%=Const.SYSTEM_NAME%>-设置安全问题</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/Base.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">
    <!--[if lt IE 9]>
    <script src="/assets/html5shiv/html5shiv.min.js"></script>
    <script src="/assets/respond/respond.js"></script>
    <![endif]-->
    <style>
        .error-info {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-xs-offset-4 col-xs-6 clearfix">
            <form action="${pageContext.request.contextPath}/question?method=register" role="form" class="form-signin"
                  method="post" id="form">
                <h2 class="form-signin-heading text-center" style="font-size: 25px;font-weight: 700;">最后一步-设置你的安全问题</h2>
                <input type="hidden" name="id" id="userId" value="${requestScope.userId}"/>
                <select class="form-control mt-5 qa-select" id="question1" name="questionOne">
                    <option value="-1">安全问题1</option>
                </select>
                <input type="text" class="form-control mt-5" placeholder="你的答案" required autofocus
                       autocomplete="off" oninvalid="setCustomValidity('请输入你的答案');" oninput="setCustomValidity('');"
                       id="answer1" name="answerOne">
                <select class="form-control mt-5 qa-select" id="question2" name="questionTwo">
                    <option value="-1">安全问题2</option>
                </select>
                <input type="text" class="form-control mt-5" placeholder="你的答案" required autofocus
                       autocomplete="off" oninvalid="setCustomValidity('请输入你的答案');" oninput="setCustomValidity('');"
                       id="answer2" name="answerTwo">
                <select class="form-control mt-5 qa-select" id="question3" name="questionThree">
                    <option value="-1">安全问题3</option>
                </select>
                <input type="text" class="form-control mt-5" placeholder="你的答案" required autofocus
                       autocomplete="off" oninvalid="setCustomValidity('请输入你的答案');" oninput="setCustomValidity('');"
                       id="answer3" name="answerThree">
                <button type="button" class="btn btn-primary btn-block mt-5" id="save">保存</button>
                <div id="form-footer clearfix" class="mt-5">
                    <span class="error-info pull-left" id="errMsg"></span>
                    <p class="pull-right">嫌太麻烦? <a href="javascript:;" data-toggle="modal"
                                                   data-target="#confirmModal">跳过</a></p>
                </div>
            </form>
        </div>
    </div>
</div>

<%-- 跳过提醒模态框 --%>
<div class="modal fade" tabindex="-1" role="dialog" id="confirmModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">跳过确认</h4>
            </div>
            <div class="modal-body">
                <p>是否跳过安全问题设置？</p>
                <p style="font-size: 12px">(ps：安全问题可用于找回密码)</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"
                        onclick="window.location.href='${pageContext.request.contextPath}/login.jsp'">确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script src="${pageContext.request.contextPath}/js/messages_zh.js"></script>
<script type="text/javascript">
    $(function () {
        getQuestion();

        $("select.qa-select").on("change", function () {
            var index = $(this).prop('selectedIndex');
            //先解开所有的option
            $("select.qa-select option").attr("disabled", false);
            //锁上兄弟节点的option
            $.each($(this).siblings("select.qa-select"), function () {
                $(this).find("option").eq(index).attr("disabled", true);
                var _index = $(this).prop('selectedIndex');
                if (_index !== 0) {
                    $.each($(this).siblings("select.qa-select"), function () {
                        $(this).find("option").eq(_index).attr("disabled", true);
                    });
                }
            });
        });

        $("#save").on("click", function () {
            $("#errMsg").text("");
            var q1 = $("#question1").val();
            var a1 = $.trim($("#answer1").val());
            var q2 = $("#question2").val();
            var a2 = $.trim($("#answer2").val());
            var q3 = $("#question3").val();
            var a3 = $.trim($("#answer3").val());
            if (q1 === "-1" || q2 === "-1" || q2 === "-1") {
                $("#errMsg").text("请选择安全问题");
                return;
            }
            if (q1 === q2 || q1 === q3 || q2 === q3) {
                $("#errMsg").text("安全问题不能重复");
                return;
            }
            if (!a1 || !a2 || !a3) {
                $("#errMsg").text("请输入你的答案");
                return;
            }
            $.post("${pageContext.request.contextPath}/question?method=register", $("#form").serialize(), function (result) {
                $("#errMsg").text(result.msg);
                if (result.status === 20000) {
                    setTimeout(function () {
                        window.location.href = "${pageContext.request.contextPath}/login.jsp";
                    }, 1000)
                }
            }, "json");
        });

    });

    function getQuestion() {
        $.get("${pageContext.request.contextPath}/manage/security?method=findAll", function (result) {
            var _result = result.data;
            var html = "";
            $.each(_result, function () {
                html += '<option value="' + this.id + '">';
                html += this.question;
                html += '</option>';
            });
            $("#question1,#question2,#question3").append(html);
        }, "json");
    }
</script>
</body>
</html>